<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>发布 - 斯坦德社区</title>
    <head th:insert="~{import :: head}"></head>
    <head th:insert="~{import :: markdown}"></head>
</head>
<body>

<div th:insert="~{navigation :: nav}"></div>
<div class="container-fluid main">
    <div class="row">
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
            <h2><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 发起</h2>
            <hr>

            <form action="/publish" method="post">
                <input type="hidden" name="id" th:value="${id}">
                <div class="form-group">
                    <label for="anonymous">是否匿名：</label>
                    <input type="checkbox" id="anonymous" name="anonymous" value="1" th:checked="${anonymous}">
                </div>
                <div class="form-group">
                    <label for="title">帖子标题（简单扼要）:</label>
                    <input type="text" class="form-control" th:value="${title}" id="title" name="title"
                           placeholder="帖子标题……"
                           autocomplete="off">
                </div>
                <div class="form-group" id="question-editor" style="z-index: 2;">
                        <textarea name="description" id="description" th:text="${description}" style="display:none;"
                                  class="form-control"
                                  cols="30"
                                  rows="10"></textarea>
                </div>
                <script type="text/javascript">
                    $(function () {
                        var editor = editormd("question-editor", {
                            width: "100%",
                            height: 580,
                            path: "/js/lib/",
                            delay: 0,
                            watch: false,
                            placeholder: "请输入帖子描述",
                            imageUpload: true,
                            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                            imageUploadURL: "/file/upload",
                            htmlDecode: true,
                            toolbarIcons: function(){
                                return [
                                    "undo",
                                    "redo",
                                    "|",
                                    "bold",
                                    "del",
                                    "italic",
                                    "quote",
                                    "ucwords",
                                    "uppercase",
                                    "lowercase",
                                    "|",
                                    "h1",
                                    "h2",
                                    "h3",
                                    "h4",
                                    "h5",
                                    "h6",
                                    "|",
                                    "list-ul",
                                    "list-ol",
                                    "hr",
                                    "|",
                                    "link",
                                    "reference-link",
                                    "image",
                                    "video",
                                    "code",
                                    "preformatted-text",
                                    "code-block",
                                    "table",
                                    "datetime",
                                    "emoji",
                                    "html-entities",
                                    "pagebreak",
                                    "|",
                                    "goto-line",
                                    "watch",
                                    "preview",
                                    "fullscreen",
                                    "clear",
                                    "search"
                                ]
                            },
                            htmlDecode : true,
                            toolbarIconsClass: {
                                video: "fa-file-video-o"
                            },
                            toolbarHandlers: {
                                video: function(cm, icon, cursor, selection){
                                    var _this       = this;
                                    var cm          = this.cm;
                                    var editor      = this.editor;
                                    var settings    = this.settings;
                                    var lang        = this.lang;
                                    var linkLang    = lang.dialog.link;
                                    var classPrefix = this.classPrefix;
                                    var dialogName  = classPrefix + "video-dialog", dialog;

                                    cm.focus();

                                    if (editor.find("." + dialogName).length > 0)
                                    {
                                        dialog = editor.find("." + dialogName);
                                        dialog.find("[data-url]").val("http://");

                                        this.dialogShowMask(dialog);
                                        this.dialogLockScreen();
                                        dialog.show();
                                    }
                                    else
                                    {
                                        var dialogHTML = "<div class=\"" + classPrefix + "form\">" +
                                            "<label>" + linkLang.url + "</label>" +
                                            "<input type=\"text\" value=\"http://\" data-url />" +
                                            "<br/>" +
                                            "</div>";

                                        dialog = this.createDialog({
                                            title      : linkLang.title,
                                            width      : 380,
                                            height     : 211,
                                            content    : dialogHTML,
                                            mask       : settings.dialogShowMask,
                                            drag       : settings.dialogDraggable,
                                            lockScreen : settings.dialogLockScreen,
                                            maskStyle  : {
                                                opacity         : settings.dialogMaskOpacity,
                                                backgroundColor : settings.dialogMaskBgColor
                                            },
                                            buttons    : {
                                                enter  : [lang.buttons.enter, function() {
                                                    var url   = this.find("[data-url]").val();

                                                    if (url === "http://" || url === "")
                                                    {
                                                        alert(linkLang.urlEmpty);
                                                        return false;
                                                    }

                                                    /*if (title === "")
                                                    {
                                                        alert(linkLang.titleEmpty);
                                                        return false;
                                                    }*/

                                                    var str = `<video class="video-js" controls preload="auto" width="100%" poster=""><source src="${url}" type="video/mp4" ><p class="vjs-no-js">To view this video please enable JavaScript</p></video>`

                                                    cm.replaceSelection(str);

                                                    this.hide().lockScreen(false).hideMask();

                                                    return false;
                                                }],

                                                cancel : [lang.buttons.cancel, function() {
                                                    this.hide().lockScreen(false).hideMask();

                                                    return false;
                                                }]
                                            }
                                        });
                                    }


                                    return;
                                }
                            }
                        });
                    });
                </script>
                <div class="form-group">
                    <label for="tag">添加标签:</label>
                    <select class="form-control" name="tag" id="tag" placeholder="选择一个合适的标签分类">
                        <option th:each="tagName : ${tags[0].tags}" th:value="${tagName}" th:text="${tagName}" th:selected="${tag eq tagName}"></option>
                    </select>
                </div>

                <div class="container-fluid main ">
                    <div class="row">
                        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
                            <div class="alert alert-danger col-lg-12 col-md-12 col-sm-12 col-xs-12"
                                 th:text="${error}"
                                 th:if="${error != null}">
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
                            <button type="submit" class="btn btn-success btn-publish ">
                                发布
                            </button>
                        </div>
                    </div>
                </div>
            </form>

<!--            <input type="file" name="file" id="file_upload"/>-->
        </div>
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
            <h3>帖子发起指南</h3>
            • 帖子标题: 请用精简的语言描述您发布的帖子，不超过40字 <br>
            • 帖子补充: 详细补充您的帖子内容，并确保帖子描述清晰直观, 并提供一些相关的资料<br>
            • 选择标签: 选择一个合适的标签<br>
        </div>
    </div>
</div>
<div th:insert="~{footer :: foot}"></div>

<script>
    // document.getElementById("file_upload").onchange = function(e){
    //     e.preventDefault();
    //     let formData = new FormData();
    //     console.log(this.files[0]);
    // }
</script>
</body>
</html>